<template>
  <div style="display: flex;flex-direction: column;height: 100%" v-loading="loading">
    <div class="el-header">
      <el-form :inline="true" class="search-form search-form-normal" size="mini" ref="searchForm" :model="search_keys">
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              <i class="header-icon el-icon-s-operation">{{$t('Tips.allSearchKey')}}</i>
            </template>
            <div>
              <el-form-item label="箱型">
                <el-input placeholder="箱型" v-model="search_keys.containerSize" class="search-form-item-input"></el-input>
              </el-form-item>
              <el-form-item :label="$t('pageTable.billNo')">
                <el-input :placeholder="$t('pageTable.billNo')" v-model="search_keys.billNo" class="search-form-item-input"></el-input>
              </el-form-item>
              <!--vesselNameVoyage-->
              <el-form-item label="船名航次">
                <el-input placeholder="船名航次" v-model="search_keys.vesselNameVoyage" class="search-form-item-input"></el-input>
              </el-form-item>
              <el-form-item label="箱号">
                <el-input placeholder="箱号" v-model="search_keys.caseNumber" class="search-form-item-input"></el-input>
              </el-form-item>
              <el-form-item label="供货商名称">
                <el-input placeholder="供货商名称" v-model="search_keys.supplierName" class="search-form-item-input"></el-input>
              </el-form-item>
              <el-form-item :label="$t('pageTable.contractNo')">
                <el-input :placeholder="$t('pageTable.contractNo')" v-model="search_keys.contractNo" class="search-form-item-input"></el-input>
              </el-form-item>
              <el-form-item :label="$t('pageTable.MatterMaterialSpecificNumber')">
                <el-input :placeholder="$t('pageTable.MatterMaterialSpecificNumber')" v-model="search_keys.materialCode" class="search-form-item-input" style="width:160px" size="mini"
                          :maxlength="32" ></el-input>
              </el-form-item>
              <el-form-item :label="$t('pageTable.departureDate')">
                <el-date-picker
                  class=""
                  v-model="search_keys.departureDateArray"
                  type="daterange"
                  value-format="yyyyMMddHHmmss"
                  :start-placeholder="$t('pageTable.startTime')"
                  :end-placeholder="$t('pageTable.endTime')">
                </el-date-picker>
              </el-form-item>
              <el-form-item :label="$t('pageTable.createUser')">
                <el-input :placeholder="$t('pageTable.createUser')" v-model="search_keys.createUser" class="search-form-item-input"></el-input>
              </el-form-item>
              <el-form-item :label="$t('pageTable.createTime')">
                <el-date-picker
                  class=""
                  v-model="search_keys.createTimeArray"
                  type="daterange"
                  value-format="yyyyMMddHHmmss"
                  :start-placeholder="$t('pageTable.startTime')"
                  :end-placeholder="$t('pageTable.endTime')">
                </el-date-picker>
                <!--<el-input placeholder="创建时间" v-model="search_keys.createTime" class="search-form-item-input"></el-input>-->
              </el-form-item>
              <el-form-item :label="$t('pageTable.updateUser')">
                <el-input :placeholder="$t('pageTable.updateUser')" v-model="search_keys.updateUser" class="search-form-item-input"></el-input>
              </el-form-item>
              <el-form-item :label="$t('pageTable.updateTime')">
                <el-date-picker
                  class=""
                  v-model="search_keys.updateTimeArray"
                  type="daterange"
                  value-format="yyyyMMddHHmmss"
                  :start-placeholder="$t('pageTable.startTime')"
                  :end-placeholder="$t('pageTable.endTime')">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-collapse-item>
        </el-collapse>



        <el-form-item style="float: right">
          <el-button type="primary" v-if="subject.hasPermissions('maintenance:warehouse:packingDetails:list:view')" @click="exec_search({search_keys, pageNum:1})"  >
            <i class="fa fa-search" aria-hidden="true"></i> {{$t('searchFrom.search')}}
          </el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary"  @click="reset" icon="el-icon-error" >
            {{$t('searchFrom.reset')}}
          </el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" v-if="subject.hasPermissions('maintenance:warehouse:packingDetails:list:delete')" :disabled="multipleSelection.length==0" @click="deleteGoods" icon="el-icon-delete" >
            {{$t('searchFrom.delete')}}
          </el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" v-if="subject.hasPermissions('maintenance:warehouse:packingDetails:list:add')" @click="add()" icon="el-icon-plus" >
            {{$t('searchFrom.add')}}
          </el-button>
        </el-form-item>


        <el-form-item style="float: right">
          <el-button type="primary"  v-if="subject.hasPermissions('maintenance:warehouse:packingDetails:list:export')" @click="exportData(search_keys)" size="mini" >
            <i class="fa fa-plus" aria-hidden="true"></i>  {{$t('searchFrom.export')}}
          </el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <import-button v-if="subject.hasPermissions('maintenance:warehouse:packingDetails:list:import')" @saved="exec_search({search_keys, pageNum:1})" target = "PACKING_DETAILS"></import-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" v-if="subject.hasPermissions('maintenance:warehouse:packingDetails:list:allEdit')" :disabled="multipleSelection.length==0" @click="editAll" icon="el-icon-delete" >
            批量修改
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table size="mini"
              style="flex: 1"
              :height="600"
              ref="tb"
              border
              class="search-result-table"
              :data="search_result.list" row-key="id"
              :stripe="true"
              :row-class-name="({row,rowIndex}) => { return row.state==1 ? 'locked-row' : null; }"
              @row-click="clickRow"
              @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" fixed width="50" align="center"/>
      <el-table-column   width="100" align="center" label="船期">
        <template slot-scope="scope">
          {{scope.row.departureDate != null ?$moment(scope.row.departureDate,'YYYYMMDD').format('YYYY-MM-DD') : ''}}
        </template>
      </el-table-column>
      <el-table-column   width="100" align="center" label="装箱日期">
        <template slot-scope="scope">
          {{scope.row.packingDate != null ?$moment(scope.row.packingDate,'YYYYMMDD').format('YYYY-MM-DD') : ''}}
        </template>
      </el-table-column>
      <el-table-column prop="contractNo"  :show-overflow-tooltip="true" width="120" align="center" label="合同号"  />
      <el-table-column prop="supplierName" width="100" :show-overflow-tooltip="true" align="center" label="供应商名称" />
      <el-table-column prop="materialCode"  :show-overflow-tooltip="true" align="center" label="物料号" />
      <el-table-column prop="materialNameCn" width="100" align="center" label="物料名称" />
      <el-table-column prop="materialNameEn"  width="130" :show-overflow-tooltip="true" align="center" label="英文品名"/>
      <el-table-column prop="materialNameRu" width="130" :show-overflow-tooltip="true" align="center" label="俄文品名"  />
      <el-table-column prop="hsNo"  :show-overflow-tooltip="true" align="center" label="HS海关编码"  />
      <el-table-column prop="num"  :show-overflow-tooltip="true" align="center" label="数量"  />
      <el-table-column prop="dictUnit.name"  :show-overflow-tooltip="true" align="center" label="单位"  />
      <el-table-column prop="numberOfPackages"  :show-overflow-tooltip="true" align="center" label="外包装件数"  />
      <el-table-column prop="netWeight"  :show-overflow-tooltip="true" align="center" label="净重"  />
      <el-table-column prop="grossWeight"  :show-overflow-tooltip="true" align="center" label="毛重"  />

      <el-table-column prop="size"  :show-overflow-tooltip="true" align="center" label="尺寸"  />
      <el-table-column prop="containerSize"  :show-overflow-tooltip="true" align="center" label="箱型"  />
      <el-table-column prop="caseNumber"  :show-overflow-tooltip="true" align="center" label="箱号"  />
      <el-table-column prop="leadMark"  :show-overflow-tooltip="true" align="center" label="铅封号"  />
      <el-table-column prop="oceanFreight"  :show-overflow-tooltip="true" align="center" label="海运费"  />
      <el-table-column prop="materialPrice"  :show-overflow-tooltip="true" align="center" label="单价"  />
      <el-table-column prop="totalValue"  :show-overflow-tooltip="true" align="center" label="总货值"  />
      <el-table-column prop="agencyFee"  :show-overflow-tooltip="true" align="center" label="代理费"  />
      <el-table-column prop="containerWeight"  :show-overflow-tooltip="true" align="center" label="集装箱重量"  />
      <el-table-column prop="billNo"  :show-overflow-tooltip="true" align="center" label="主提单号"  />
      <el-table-column prop="secondaryBillNo"  :show-overflow-tooltip="true" align="center" label="分提单号"  />
      <el-table-column prop="vesselNameVoyage"  :show-overflow-tooltip="true" align="center" label="船名航次"  />
      <el-table-column prop="port"  :show-overflow-tooltip="true" align="center" label="港口"  />
      <el-table-column prop="destinationPort"  :show-overflow-tooltip="true" align="center" label="目的港"  />
      <el-table-column prop="dictShippingMethods.name"  :show-overflow-tooltip="true" align="center" label="发运方式"  />
      <el-table-column prop="remark"  :show-overflow-tooltip="true" align="center" :label="$t('pageTable.dictionaryRemark')" />
      <el-table-column prop="createUser" align="center" :label="$t('pageTable.createUser')"  />
      <el-table-column :label="$t('pageTable.createTime')" show-overflow-tooltip width="120">
        <template slot-scope="scope">
          {{scope.row.createTime != null ?$moment(scope.row.createTime,'YYYYMMDDHHmmss').format('YYYY-MM-DD h:mm:ss a') : ''}}
        </template>
      </el-table-column>
      <el-table-column prop="updateUser" width="100" align="center" :label="$t('pageTable.updateUser')"  />
      <el-table-column :label="$t('pageTable.updateTime')" show-overflow-tooltip width="120">
        <template slot-scope="scope">
          {{scope.row.updateTime != null ?$moment(scope.row.updateTime,'YYYYMMDDHHmmss').format('YYYY-MM-DD h:mm:ss a') : ''}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="80" :label="$t('pageTable.operate')" >
        <template slot-scope="scope" >
          <el-button  v-if="subject.hasPermissions('maintenance:warehouse:packingDetails:list:edit')"  type="primary" size="mini" class="btn-opt" plain @click="edit(scope.row.id)">
            <i class="el-icon-news"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-packing-details v-bind.sync="link_modal_state" @success="exec_search({search_keys, pageNum:1})" v-if="link_modal_state.activated"></edit-packing-details>
    <all-edit-packing-details v-bind.sync="link_modal_state_all" @success="exec_search({search_keys, pageNum:1})" v-if="link_modal_state_all.activated"></all-edit-packing-details>
    <export-info v-bind.sync="link_modal_state_export" v-if="link_modal_state_export.activated"></export-info>

    <!--分页-->
    <div style="text-align: center">
      <el-pagination @current-change="exec_search({pageNum:$event})"
                     @size-change="exec_search({search_keys,pageSize:$event})"
                     :total="search_result.total"
                     :current-page="search_result.pageNum"
                     :page-size="search_result.pageSize"
                     :disabled="!search_result.total"
                     :page-sizes="PAGE_SIZES"
                     layout="total, sizes, prev, pager, next, jumper"
                     background/>
    </div>
  </div>
</template>

<script>
  import activityService from '@/api/warehouse/packingDetailsList'
  import ui_config from '@/config/ui_config'
  import ImportButton from '@/components/data-import/ImportButton'
  import {downloadBlobResponse} from '@/utils/request_utils'
  import { mapGetters,mapState } from 'vuex'
  import EditPackingDetails from './EditPackingDetails'
  import AllEditPackingDetails from './AllEditPackingDetails'
  import exportInfo from './exportInfo'




  export default {
    data() {
      return {
        loading:false,
        PAGE_SIZES : ui_config.PAGE_SIZES,
        link_modal_state      : {},
        link_modal_state_export      : {},
        link_modal_state_all      : {},
        //单位下拉框数据
        is_searching : true,
        goodsStatus:[],
        transportation:[],
        materialCategorys:[],
        old_search_keys:{},
        search_keys   : {
          containerSize:"",
          caseNumber:"",
          billNo:"",
          supplierName:"",
          vesselNameVoyage:"",
          contractNo:"",
          materialCode:"",
          departureDateArray:"",
          createUser:'',
          createTime:'',
          createTimeArray:'',
          updateUser:'',
          updateTimeArray:'',
          updateTime:'',

        },
        search_keys_snap      : null,
        search_result         : {},
        multipleSelection:[],
        idsStr:[],
      };
    },
    components:{ImportButton,EditPackingDetails,AllEditPackingDetails,exportInfo},
    async mounted() {
      await this.init();
      this.exec_search({search_keys:this.search_keys, pageNum:1});
    },
    computed:{
      ...mapState({
        language:state=>state.app.language
      }),
    },
    watch:{
      async language(val,val1){
        // alert(val+val1)
        await this.init();
        this.exec_search({search_keys:this.search_keys, pageNum:1});
      }
    },
    methods: {
      //添加
      add() {
        this.link_modal_state={activated:true,mode:"ADD",};
      },
      //编辑
      edit(id) {
        this.link_modal_state={activated:true,id,mode:"EDIT",};
      },
      editAll(){
        this.idsStr=[];
        this.multipleSelection.forEach(item=>{
          this.idsStr.push(item.id)
        });
        this.link_modal_state_all={activated:true,idsStr:this.idsStr,};
      },
      reset(){
        this.search_keys  ={
          caseNumber:"",
          billNo:"",
          vesselNameVoyage:"",
          contractNo:"",
          materialCode:"",
          departureDateArray:"",
          createUser:'',
          createTime:'',
          createTimeArray:'',
          updateUser:'',
          updateTimeArray:'',
          updateTime:'',
        }
      },
      price(row, column, cellValue, index){
        if (cellValue) {
          return cellValue.toFixed(2)
        }else {
          return ""
        }
      },
      init(){
        return activityService.initView().then(resp=>{
          this.goodsStatus=resp.data.result.goodsStatus;
          this.transportation=resp.data.result.transportation
        },error => {

        })
      },
      clickRow(row){
        this.$refs.tb.toggleRowSelection(row);
      },
      exec_search({
                    search_keys = JSON.parse(this.search_keys_snap),
                    pageNum = this.search_result.pageNum,
                    pageSize = this.search_result.pageSize,
                  }) {
        let search_keys_snap = JSON.stringify(search_keys);     //抓查询条件快照
        let data={
          ...search_keys,
          departureDateStart     :   search_keys.departureDateArray && search_keys.departureDateArray[0] || "",
          departureDateEnd     :   search_keys.departureDateArray && search_keys.departureDateArray[1] || "",
          // departureDateEnd     :   search_keys.departureDateArray && this.$moment(search_keys.departureDateArray[1],'YYYYMMDDHHmmss').add(1, 'days').format('YYYYMMDDHHmmss') || "",
          createTimeStart     :   search_keys.createTimeArray && search_keys.createTimeArray[0] || "",
          createTimeEnd       :   search_keys.createTimeArray && search_keys.createTimeArray[1] || "",
          // createTimeEnd       :   search_keys.createTimeArray && this.$moment(search_keys.createTimeArray[1],'YYYYMMDDHHmmss').add(1, 'days').format('YYYYMMDDHHmmss')    || "",
          updateTimeStart     :   search_keys.updateTimeArray && search_keys.updateTimeArray[0] || "",
          updateTimeEnd       :   search_keys.updateTimeArray && search_keys.updateTimeArray[1] || "",
          // updateTimeEnd       :   search_keys.updateTimeArray && this.$moment(search_keys.updateTimeArray[1],'YYYYMMDDHHmmss').add(1, 'days').format('YYYYMMDDHHmmss')    || "",
        };
        this.loading=true;
        activityService.getPackingDetailsList({...data, pageNum, pageSize}).then(resp => {
          this.search_result = resp.data.resultInfo;                //视图展示查询结果
          this.old_search_keys=JSON.stringify(data);
          this.search_keys = JSON.parse(search_keys_snap); //还原查询条件
          this.search_keys_snap = search_keys_snap;             //存储查询条件快照
          this.loading=false;
        }, err => {
          console.error(err);
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      exportData(search_keys) {
        // this.$confirm(this.$t("Tips.exportQueries"), this.$t("Tips.tips"), {
        //   confirmButtonText: this.$t("Tips.yes"),
        //   cancelButtonText:this.$t("Tips.no"),
        //   type: 'info',
        //   center: true
        // }).then(() => {
        //   // debugger
        //   this.loading=true;
        //   let data=JSON.parse(this.old_search_keys);
        //   activityService.exportData({...data}).then(resp=>{
        //     this.loading=false;
        //     downloadBlobResponse(resp); // 文件下载
        //   });
        // }).catch(() => {
        //   this.internal_activated = true;
        // })//删除
        let data=JSON.parse(this.old_search_keys);
        this.link_modal_state_export={activated:true,data};
      },
      //删除
      deleteGoods() {
        this.$confirm(this.$t("Tips.deleteQueries"), this.$t("Tips.tips"),  {
          confirmButtonText: this.$t("Tips.yes"),
          cancelButtonText: this.$t("Tips.no"),
          type: 'warning',
          center: true
        }).then(() => {
          this.loading=true;
            this.idsStr=[];
            this.multipleSelection.forEach(item=>{
              this.idsStr.push(item.id)
            });
            activityService.deletePackingDetails({idsStr:this.idsStr}).then(resp => {
              this.loading=false;
              if (resp.data.code=="201"){
                this.$notify({message: resp.data.message, type: "success"});
                this.exec_search({search_keys:this.search_keys, pageNum:1})
              } else {
                this.$notify({message: resp.data.message, type: "error"});
              }
            })
          }
        ).catch(() => {
          this.internal_activated = true;
        })
      },
    },
  }
</script>

<style scoped>
  .search-result-table >>> .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 15px;
  }
  .search-result-table >>>.el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }



</style>